<template>
  <el-dialog :title="title" width="80%" :visible.sync="visible" top="5vh" :close-on-click-modal="false">
    <el-form :inline="true">
      <el-form-item label="商品条码：">
        <el-input v-model="recordInfo.queryForm.barCode" placeholder="输入商品条码" clearable/>
      </el-form-item>
      <el-form-item label="商品名称：">
        <el-input v-model="recordInfo.queryForm.goodsName" placeholder="输入商品名称" clearable/>
      </el-form-item>
      <el-form-item label="类别：">
        <el-cascader
          v-model="recordInfo.excludeByOrganizationGoodsCategoryId"
          placeholder="请选择类别"
          :props="props"
          clearable
        />
      </el-form-item>
      <el-form-item v-if="showSupplyTargetChain" label="供应连锁机构：">
        <el-select
          v-model="recordInfo.queryForm.supplyTargetChainOrganizationId"
          filterable
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(item, index) in supplyTargetChainList"
            :key="index"
            :label="item.organizationName"
            :value="item.organizationId"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showSupplier" label="供应商/仓库：">
        <el-select v-model="recordInfo.queryForm.goodsOrganizationId" filterable placeholder="请选择" clearable>
          <el-option
            v-for="(item, index) in getSupplierListArr"
            :key="index"
            :label="item.organizationName"
            :value="item.supplierOrganizationId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchClick">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button v-if="true === showConfirmButton" type="primary" @click="determineClick">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-if="current === 'mini'"
      ref="multipleTable"
      v-loading="recordInfo.loading"
      class="table-default"
      :data="recordInfo.list"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="false===oneGoods" type="selection" width="43" align="center" fixed="left"/>
      <el-table-column label="商品条码" width="145" prop="barCode" align="center"/>
      <el-table-column label="商品名称" prop="goodsName" show-tooltip-when-overflow align="center"/>
      <el-table-column label="规格" prop="specifications" width="120" align="center"/>
      <el-table-column label="品牌" prop="brandName" width="100" align="center"/>
      <el-table-column label="单位" prop="unitText" width="50" align="center"/>
      <el-table-column label="现库存" prop="stockQuantity" width="80" align="center"/>
      <el-table-column label="供应商" prop="goodsOrganizationName" show-tooltip-when-overflow align="center"/>
      <el-table-column v-if="true===oneGoods" prop="priceTax" label="选择" width="60" fixed="right" align="center">
        <template v-slot="scope">
          <div class="list-operate-menu">
            <i class="el-icon-success check-button" @click="confirmSelect(scope.row)"/>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-if="'app'===current||'storeSupplyGoods'===current||'mySupplyGoodsList'===current"
      ref="multipleTable"
      v-loading="recordInfo.loading"
      class="table-default"
      :data="recordInfo.list"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="43" align="center" fixed="left"/>
      <el-table-column label="商品条码" width="145" prop="barCode" align="center"/>
      <el-table-column label="商品名称" show-tooltip-when-overflow prop="goodsName" align="center"/>
      <el-table-column label="品牌" width="60" prop="brandName" align="center"/>
      <el-table-column label="规格" prop="specifications" width="120" align="center"/>
      <el-table-column label="单位" width="50" prop="unitText" align="center"/>
      <el-table-column label="配送单位" prop="unitTypeText" width="80" align="center"/>
      <el-table-column label="进价" prop="chainPurchasePrice" width="80" align="center"/>
      <el-table-column label="供应商/仓库" prop="supplierOrganizationName" align="center" show-tooltip-when-overflow/>
      <el-table-column
        v-if="'mySupplyGoodsList'===current"
        label="连锁机构"
        align="center"
        prop="supplyTargetOrganizationName"
      />
    </el-table>
    <el-table
      v-if="current === 'goods'"
      ref="multipleTable"
      v-loading="recordInfo.loading"
      class="table-default"
      :data="recordInfo.list"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="43" align="center" fixed="left"/>
      <el-table-column label="商品条码" prop="barCode" width="140" align="center"/>
      <el-table-column label="商品名称" prop="goodsName" show-tooltip-when-overflow align="center"/>
      <el-table-column label="品牌" prop="brandName" width="100" align="center"/>
      <el-table-column label="规格" prop="specifications" width="120" align="center"/>
      <el-table-column label="单位" prop="unitText" width="50" align="center"/>
      <el-table-column label="产地" prop="productionPlace" width="100" align="center"/>
      <el-table-column label="类别" prop="goodsCategoryName" width="100" align="center"/>
    </el-table>
    <el-table
      v-if="current === 'oneGoods'"
      ref="multipleTable"
      v-loading="recordInfo.loading"
      class="table-default"
      :data="recordInfo.list"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="商品条码" prop="barCode" width="140" align="center"/>
      <el-table-column label="商品名称" prop="goodsName" show-tooltip-when-overflow align="center"/>
      <el-table-column label="品牌" prop="brandName" width="100" align="center"/>
      <el-table-column label="规格" prop="specifications" width="120" align="center"/>
      <el-table-column label="单位" prop="unitText" width="50" align="center"/>
      <el-table-column label="产地" prop="productionPlace" width="100" align="center"/>
      <el-table-column label="类别" prop="goodsCategoryName" width="100" align="center"/>
      <el-table-column prop="priceTax" label="选择" width="60" fixed="right" align="center">
        <template v-slot="scope">
          <div class="list-operate-menu">
            <i class="el-icon-success check-button" @click="confirmSelect(scope.row)"/>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px;"
      background
      :current-page.sync="recordInfo.queryForm.page"
      :page-size.sync="recordInfo.queryForm.pageSize"
      :page-sizes="[5,10,20,30,50,100,200,500]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="recordInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex'
import filters from '@/filters/index'
import permissionMixin from '@/mixins/modules/permission'
import api from '@/api'

export default {
  components: {},
  filters: {
    ...filters
  },
  mixins: [permissionMixin],
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            if (node.level === 0) {
              var arr = []
              api.getGoodsCategoryList({
                parentId: 0,
                page: 1,
                pageSize: 999
              }).then(response => {
                response.list.forEach((item, index) => {
                  arr.push({
                    value: item.goodsCategoryId,
                    label: item.categoryName,
                    leaf: false
                  })
                })
                resolve(arr)
              })
            }
            if (node.level === 1) {
              // eslint-disable-next-line no-redeclare
              var arr = []
              api.getGoodsCategoryList({
                parentId: node.value,
                page: 1,
                pageSize: 999
              }).then(response => {
                response.list.forEach((item, index) => {
                  arr.push({
                    value: item.goodsCategoryId,
                    label: item.categoryName,
                    leaf: false
                  })
                })
                resolve(arr)
              })
            } else if (node.level === 2) {
              // eslint-disable-next-line no-redeclare
              var arr = []
              api.getGoodsCategoryList({
                parentId: node.value,
                page: 1,
                pageSize: 999
              }).then(response => {
                response.list.forEach((item, index) => {
                  arr.push({
                    value: item.goodsCategoryId,
                    label: item.categoryName,
                    leaf: true
                  })
                })
                resolve(arr)
              })
            }
          }, 100)
        }
      },
      getSupplierListArr: [],
      supplyTargetChainList: [],
      recordInfo: {
        queryForm: {
          page: 1,
          pageSize: 10,
          returnCount: true,
          orderBy: 'createTimeDesc'
        },
        list: [],
        excludeByOrganizationGoodsCategoryId: null,
        total: 0
      },
      title: '选择商品',
      visible: false,
      handleSelection: [],
      current: '',
      showSupplier: true,
      showSupplyTargetChain: false,
      showConfirmButton: true,
      oneGoods: false
    }
  },
  computed: {
    ...mapGetters([
      'replenishParseTypeList',
      'purchaseOrderStateList'
    ])
  },
  methods: {
    getGoodsList() {
      this.$api.getGoodsList(this.recordInfo.queryForm).then(response => {
        this.recordInfo.loading = false
        this.recordInfo.list = response.list
        this.recordInfo.total = parseInt(response.count)
      })
      this.$forceUpdate()
    },
    getOnlineShoppingMallGoodsList() {
      this.recordInfo.queryForm.state = 1
      this.$api.getOnlineShoppingMallGoodsList(this.recordInfo.queryForm).then(response => {
        this.recordInfo.loading = false
        this.recordInfo.list = response.list
        this.recordInfo.total = parseInt(response.count)
      })
    },
    getSupplyGoodsListByToMe() {
      this.recordInfo.queryForm.state = 1
      this.$api.getSupplyGoodsListByToMe(this.recordInfo.queryForm, {showLoading: false}).then(res => {
        this.recordInfo.loading = false
        for (let i = 0; i < res.list.length; i++) {
          res.list[i].chainPurchasePrice = res.list[i].chainPurchasePrice.toFixed(2)
          if (res.list[i].unitType === 1) {
            res.list[i].unitTypeText = '小包装'
          } else if (res.list[i].unitType === 2) {
            res.list[i].unitTypeText = '中包装'
          } else if (res.list[i].unitType === 3) {
            res.list[i].unitTypeText = '大包装'
          }
        }
        this.recordInfo.list = res.list
        this.recordInfo.total = parseInt(res.count)
      })
    },
    getSupplyGoodsListByMeSupply() {
      this.recordInfo.queryForm.state = 1
      this.$api.getSupplyGoodsListByMeSupply(this.recordInfo.queryForm).then(res => {
        this.recordInfo.loading = false
        this.recordInfo.list = res.list
        this.recordInfo.total = parseInt(res.count)
      })
    },
    handleSizeChange(e) {
      this.recordInfo.queryForm.pageSize = e
      this.getList()
    },
    handleCurrentChange(e) {
      this.recordInfo.queryForm.page = e
      this.getList()
    },
    getList() {
      if (this.current === 'mini') {
        this.getOnlineShoppingMallGoodsList()
      } else if (this.current === 'app' || this.current === 'storeSupplyGoods') {
        this.getSupplyGoodsListByToMe()
      } else if (this.current === 'goods') {
        this.getGoodsList()
      } else if (this.current === 'goodsContainPackage') {
        this.current = 'goods'
        this.recordInfo.queryForm.returnPackageGoodsInfo = true
        this.getGoodsList()
      } else if (this.current === 'oneGoods') {
        this.recordInfo.queryForm.returnPackageGoodsInfo = false
        this.getGoodsList()
      } else if (this.current === 'mySupplyGoodsList') {
        this.getSupplyGoodsListByMeSupply()
      }
    },
    getSupplierList() {
      this.$api.getSupplierList({
        returnCount: true,
        page: 1,
        pageSize: 999
      }).then(res => {
        this.getSupplierListArr = res.list
      })
    },
    getSupportSupplyOrganizationByMe() {
      this.$api.getSupportSupplyOrganizationByMe({
        returnCount: true,
        page: 1,
        pageSize: 999
      }).then(res => {
        this.supplyTargetChainList = res.list
      })
    },
    childClick(e, oneGoods, params) {
      this.current = e
      this.showConfirmButton = true
      if (e === 'goods') {
        this.showSupplier = false
      } else if (e === 'oneGoods') {
        this.showSupplier = false
        this.showConfirmButton = false
      } else if (e === 'mini') {
        this.title = '选择线上商城商品'
        if (undefined !== oneGoods && oneGoods === true) {
          this.oneGoods = true
        }
      } else if (e === 'mySupplyGoodsList') {
        this.title = '选择可供商品'
        this.showSupplyTargetChain = true
      } else if (e === 'storeSupplyGoods') {
        this.title = '选择可供商品'
        this.recordInfo.queryForm.supplyTargetOrganizationId = params.supplyTargetOrganizationId
        this.recordInfo.queryForm.replenishmentSupplyGoods = true
      } else if (e === 'app') {
        this.title = '选择可供商品'
      }
      this.getList()
      if (e !== 'mySupplyGoodsList') {
        this.getSupplierList()
      } else {
        this.getSupportSupplyOrganizationByMe()
      }
      this.visible = true
    },
    handleSelectionChange(e) {
      this.handleSelection = e
    },
    determineClick() {
      if (this.handleSelection.length === 0) {
        this.$message({
          message: '请勾选供应商',
          type: 'warning'
        })
        return
      }
      this.visible = false
      this.$parent.fatherMethodShop(this.handleSelection)
      this.$refs.multipleTable.clearSelection()
    },
    confirmSelect(item) {
      this.visible = false
      this.$parent.fatherMethodShop([item])
    },
    searchClick() {
      if (this.recordInfo.excludeByOrganizationGoodsCategoryId !== null) {
        this.recordInfo.queryForm.excludeByOrganizationGoodsCategoryId = this.recordInfo
          .excludeByOrganizationGoodsCategoryId[2]
        this.recordInfo.queryForm.goodsCategoryId = this.recordInfo.queryForm.excludeByOrganizationGoodsCategoryId
        // TOOD 不知道是什么情况使用这个参数，暂时去除不提交
        this.recordInfo.queryForm.excludeByOrganizationGoodsCategoryId = undefined
      } else {
        this.recordInfo.queryForm.excludeByOrganizationGoodsCategoryId = undefined
        this.recordInfo.queryForm.goodsCategoryId = undefined
      }
      if (this.current === 'app' || this.current === 'storeSupplyGoods') {
        if (undefined !== this.recordInfo.queryForm.goodsOrganizationId && this.recordInfo.queryForm
          .goodsOrganizationId !== '' && this.recordInfo.queryForm.goodsOrganizationId !== '0') {
          this.recordInfo.queryForm.organizationId = this.recordInfo.queryForm.goodsOrganizationId
        } else {
          this.recordInfo.queryForm.organizationId = undefined
        }
      }
      this.getList()
    }
  }
}
</script>

<style scoped>
.check-button {
  font-size: 20px !important;

  &:hover {
    color: #3a8ee6;
  }
}
</style>
